@import '{}/imports/ui/stylesheets/utils.less';

.list-header {
  background: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  height: 5em;

  text-align: center;
  @media screen and (min-width: 40em) { text-align: left; }

  .title-page {
    .position(absolute, 0, 3rem, auto, 3rem);
    line-height: 3rem;
    @media screen and (min-width: 40em) {
      left: 1rem;
      right: 6rem;
    }

    cursor: pointer;
    font-size: 1.125em; // 18px
    white-space: nowrap;

    .title-wrapper {
      .ellipsized;
      color: @color-ancillary;
      display: inline-block;
      padding-right: 1.5rem;
      vertical-align: top;
      max-width: 100%;
    }

    .count-list {
      background: @color-primary;
      border-radius: 1em;
      color: @color-empty;
      display: inline-block;
      font-size: .7rem;
      line-height: 1;
      margin-left: -1.25rem;
      margin-top: -4px;
      padding: .3em .5em;
      vertical-align: middle;
    }
  }
  form.todo-new {
    .position(absolute, 3em, 0, auto, 0);

    input[type="text"] {
      background: transparent;
      padding-bottom: .25em;
      padding-left: 44px !important;
      padding-top: .25em;
    }
  }
  form.list-edit-form {
    position: relative;

    input[type="text"] {
      background: transparent;
      font-size: 1.125em; // 18px
      width: 100%;
      padding-right: 3em;
      padding-left: 1rem;
    }
  }

  select.list-edit {
    .font-s2;
    .position(absolute, 0,0,0,0);
    background: transparent;
    opacity: 0; // allows the cog to appear
  }

  .options-web {
    display: none;

    .nav-item {
      .font-s3;
      width: 2rem;

      &:last-child { margin-right: .5rem; }
    }
  }

  // Hide & show options and nav icons
  @media screen and (min-width: 40em) {
    .nav-group:not(.right) { display: none !important; }
    .options-mobile { display: none; }
    .options-web {  display: block; }
  }
}
